<template>
	<div id="commodity">

		<!-- <el-table :data="FruitData.filter(data=> !Fruit_Search || data.name.toLowerCase().includes(Fruit_Search.toLowerCase()))" style="width: 100%"> -->
		<el-table :data="FruitData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
			<el-table-column label="Id" prop="id"></el-table-column>
			<el-table-column label="Name" prop="name"></el-table-column>
			<el-table-column label="Subtitle" prop="subtitle"></el-table-column>
			<el-table-column label="Price" prop="price"></el-table-column>
			<!-- <el-table-column label="Picture" prop="image">
				<el-button type="text" @click="imgVisible=true">图片详情</el-button>
			</el-table-column> -->

			<!--操作列-->
			<el-table-column align="right">
				<template slot="header" slot-scope="">
					<el-input v-model="Fruit_Search" size="mini" placeholder="输入关键字搜索" />
				</template>
				<!--更新/删除商品-->
				<template slot-scope="scope">
					<el-button size="mini" @click="showUpdate(scope.row)">更新商品</el-button>
					<el-button size="mini" type="danger" @click="goodDelete(scope.row)">删除商品</el-button>
					<!--上传图片-->
					<button type="button" class="el-button el-button--primary el-button--mini">
						<span style="display:flex position:relative">上传图片</span>
						<input type="file" name="upload_file" @change="upload($event,scope.$index)" style="width:20px;height:13px;opacity: 0;float: left;" />
					</button>
					<el-button type="text" @click="Picture(scope.row,true)">图片详情</el-button>
					<!-- <form action="http://47.115.152.5:8080/manage/product/upload.do" method="post" enctype="multipart/form-data">
						<input type="file" name="upload_file" @change="upload" class="file"/>
					</form> -->
					<!--更新表单-->
					<el-dialog title="更新商品" :visible.sync="updateVisible" style="float: left;" @close="dialogClose('numberValidateForm')">
						<!--表单内容 :rules是验证规则-->
						<el-form :model="update_goods" :rules="rules" ref="numberValidateForm" class="demo-ruleForm">
							<el-form-item label="商品id" :label-width="formLabelWidth" prop="id">
								<el-input v-model="update_goods.id" autocomplete="off" disabled="disabled"></el-input>
							</el-form-item>
							<el-form-item label="商品种类id" :label-width="formLabelWidth" prop="categoryId">
								<el-input v-model="update_goods.categoryId" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="名称" :label-width="formLabelWidth" prop="name">
								<el-input v-model="update_goods.name" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="价格" :label-width="formLabelWidth" prop="price">
								<el-input v-model="update_goods.price" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="库存" :label-width="formLabelWidth" prop="stock">
								<el-input v-model="update_goods.stock" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="简介" :label-width="formLabelWidth" prop="subtitle">
								<el-input v-model="update_goods.subtitle" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="在线" :label-width="formLabelWidth" prop="status">
								<el-switch v-model="update_goods.status"></el-switch>
							</el-form-item>
						</el-form>
						<!--表单按钮-->
							<el-button @click="updateVisible = false">取 消</el-button>
							<el-button type="primary" @click="updateGood(false)">确 定</el-button>
					</el-dialog>
					<!--图片-->
					<el-dialog title="图片展示" :visible.sync="imgVisible">
						<div class="demo-image">
								<el-image style="width: 300px; height: 300px" :src="imageurl"></el-image>
						</div>
							<el-button @click="Picture(scope.row,false)">取 消</el-button>
							<el-button type="primary" @click="Picture(scope.row,false)">确 定</el-button>
						</span>
					</el-dialog>
				</template>

			</el-table-column>

		</el-table>
		<!--insert新增商品-->
		<!-- <template> -->
		<template>
			<el-button type="text" @click="insertGoodsVisible = true">新增商品</el-button>
			<el-dialog title="新增商品" :visible.sync="insertGoodsVisible" @close="dialogClose('ruleForm')">
				<!--表单内容 :rules2是验证规则-->
				<el-form ref="ruleForm" :rules="rules2" :model="insertGoods" class="demo-ruleForm">
					<el-form-item label="名称" :label-width="formLabelWidth" prop="name">
						<el-input v-model="insertGoods.name" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="种类id" :label-width="formLabelWidth" prop="categoryId">
						<el-input v-model="insertGoods.categoryId" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="价格" :label-width="formLabelWidth" prop="price">
						<el-input v-model="insertGoods.price" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="副标题" :label-width="formLabelWidth" prop="subtitle">
						<el-input v-model="insertGoods.subtitle" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="库存" :label-width="formLabelWidth" prop="stock">
						<el-input v-model="insertGoods.stock" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="在线" :label-width="formLabelWidth" prop="status">
						<el-switch v-model="update_goods.status" autocomplete="off"></el-switch>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="insertGoodsVisible = false">取 消</el-button>
					<el-button type="primary" @click="insertGood">确 定</el-button>
				</span>
			</el-dialog>
		</template>
		<!-- </template> -->
		<div class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30,40, 50]" :page-size="pagesize" :total="FruitData.length" layout="total, sizes, prev, pager, next, jumper">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: "commodity",
		mounted() {
			var that = this;
			this.axios({
				method: "get",
				url: "http://47.115.152.5:8080/manage/product/list.do", //查看所有接口
				withCredentials: true, //跨域请求 在跨域请求时，会携带用户凭证
			}).then(function(res) {
				that.FruitData = res.data.data.list;
				// res.data.data.list.filter(item =>{//遍历数组
				// 	// console.log(item.mainImage);
				// 	that.mainimage.push(item.mainImage);
					
				// })
				// console.log(that.mainimage);
			});
		},
		data() {
			return {
				// cookie: '', 
				FruitData: [],
				update_goods: { //更新商品表单
					id: '', //必选
					price: '', //必选
					name: '', //必选
					stock: '', //必选
					categoryId: '', //必选
					status: '',
					subtitle: '',
					mainImage:'',
					subImages:''
				},
				deleteId: '',
				deletekey: '', //被删除设备的索引
				editVisible: false, //修改设备弹出框
				formLabelWidth: '120px',
				dialogVisible: false, //添加设备弹出框
				search: '',
				Fruit_Search: '',
				paydata_Search: '',
				cookie: '', //保存登录信息
				updateVisible: false, //更新商品弹出框
				insertGoods: { //插入商品表单
					price: '',
					name: '',
					subtitle: '',
					stock: '',
					categoryId: ''
				},
				insertGoodsVisible: false,
				tips: [
					"修改设备信息失败",
					"添加设备失败",
					"删除设备失败",
					"删除商品失败",
					"用户名或密码错误",
					"商品更新失败",
					"商品新增失败",
					"修改设备信息成功", //7
					"添加设备成功",
					"删除设备成功",
					"删除商品成功",
					"登录成功", //11
					"更新商品成功",
					"新增商品成功",
					"更新图片成功",//14
					"更新图片失败"
				],
				rules: { //验证规则
					categoryId: [{
						required: true,
						message: '种类id不可以为空'
					}],
					name: [{
						required: true,
						message: '商品名称不可以为空'
					}],
					stock: [{
						required: true,
						message: '库存不可以为空'
					}],
					price: [{
						required: true,
						message: '价格不可以为空'
					}]
				},
				rules2: {
					categoryId: [{
						required: true,
						message: '种类id不可以为空'
					}],
					name: [{
						required: true,
						message: '商品名称不可以为空'
					}],
					price: [{
						required: true,
						message: '价格不可以为空'
					}],
					stock: [{
						required: true,
						message: '库存不可以为空'
					}]
				},
				currentPage: 1,
				pagesize: 10,
				imgformdata: {},
				imgVisible: false,
				// fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
				imageurl: '',
				mainimage:'',
				FruitDatadetails:[]
			}
		},
		methods: {
			handleSizeChange: function(val) {
				this.pagesize = val;
			},
			handleCurrentChange: function(currentPage) {
				this.currentPage = currentPage;
			},
			showUpdate(keyPath) { //展示要更新的商品信息  update_goods
				this.updateVisible = true;
				this.update_goods.id = keyPath.id;
				this.update_goods.price = keyPath.price;
				this.update_goods.name = keyPath.name;
				this.update_goods.subtitle = keyPath.subtitle;
				this.update_goods.stock = keyPath.stock;
				this.update_goods.categoryId = keyPath.categoryId;

			},
			goodDelete(keyPath) { //删除商品   更新了tips
				var that = this;
				that.deleteId = keyPath.id;
				this.axios({
					method: 'POST',
					url: 'http://47.115.152.5:8080/manage/product/delete.do',
					params: {
						productId: that.deleteId
					},
					withCredentials: true,
				}).then(function(res) {
					if (res.data.status == 0) {
						that.sp();
						that.susTips(10);
					} else {
						that.errTips(3);
					}
				});
			},
			updateGood(isimage,key,mainimage) { //更新商品信息  update_goods
			//key,mainImage
				var that = this;
				that.updateVisible = false;//点击取消和确定按钮后不可见
				if(!isimage){//不带图片的更新
				this.axios({
					method: 'POST',
					url: 'http://47.115.152.5:8080/manage/product/save.do',
					params: {//通过表单传入的参数
						id: that.update_goods.id,
						categoryId: that.update_goods.categoryId,
						name: that.update_goods.name,
						price: that.update_goods.price,
						stock: that.update_goods.stock,
						subtitle: that.update_goods.subtitle,
						status: Number(that.update_goods.status),
						mainImage:that.update_goods.mainimage
					},
					withCredentials: true,
				}).then(function(res) {
					if (res.data.status === 0) {
						that.sp();
						that.susTips(12);
					} else {
						that.errTips(5);
					}
				});
				// that.update_goods.id = '';
				// that.update_goods.name = '';
				// that.update_goods.price = '';
				// that.update_goods.subtitle = '';
				// that.update_goods.stock = '';
				// that.update_goods.categoryId = '';
				// that.update_goods.status = '';
				}
				else{//带图片的商品更新
					var imageparams = {
						id:'',
						categoryId:'',
						name: '',
						price: '',
						stock: '',
						subtitle: '',
						status:'',
						mainImage:mainimage
					}
					// console.log(key,mainimage);
					this.axios({//获取商品详细信息
						method: 'GET',
						url: 'http://47.115.152.5:8080/manage/product/detail.do',
						params: {productId:that.FruitData[key].id},
						withCredentials: true,
						}).then(function(res) {
							// console.log(res.data.data,imageparams);
							imageparams.id=res.data.data.id,
							imageparams.categoryId=res.data.data.categoryId,
							imageparams.name=res.data.data.name,
							imageparams.price=res.data.data.price,
							imageparams.stock=res.data.data.stock,
							imageparams.subtitle=res.data.data.subtitle,
							imageparams.status=res.data.data.status
							that.axios({
								method: 'POST',
								url: 'http://47.115.152.5:8080/manage/product/save.do',
								params: imageparams,
								withCredentials: true,
							}).then(function(res) {
								if (res.data.status === 0) {
								// 	that.sp();
									that.susTips(14);
								// console.log(res);
									that.sp();//刷新，获取更新的图片
									}
								else{
									that.errTips(15);
									}
							});
						});	
				}
			},
			insertGood() { //新增商品   insertGoods
				var that = this;
				that.insertGoodsVisible = false;
				this.axios({
					method: 'POST',
					url: 'http://47.115.152.5:8080/manage/product/save.do',
					params: {
						name: that.insertGoods.name,
						price: that.insertGoods.price,
						subtitle: that.insertGoods.subtitle,
						stock: that.insertGoods.stock,
						categoryId: that.insertGoods.categoryId,
					},
					withCredentials: true,
				}).then(function(res) {
					if (res.data.status === 0) {
						that.sp();
						that.susTips(13);
					} else {
						that.errTips(6);
					}
				});
				// that.insertGoods.name = "",
				// 	that.insertGoods.price = "",
				// 	that.insertGoods.subtitle = "",
				// 	that.insertGoods.stock = "",
				// 	that.insertGoods.categoryId = "",
				// 	that.insertGoods.subtitle = ""
			},
			sp: function() {
				var that = this;
				this.axios({
						method: "get",
						url: "http://47.115.152.5:8080/manage/product/list.do",
						withCredentials: true,
					})
					.then(function(res) {
						that.FruitData = res.data.data.list;
						// console.log(res.data.data.list);
						
					})
			},
			errTips(option) { //错误信息提示
				this.$notify.error({
					title: '错误',
					message: this.tips[option]
				});
			},
			susTips(option) { //成功信息提示
				this.$notify({
					title: '成功',
					message: this.tips[option],
					type: 'success'
				});
			},
			request(methed, url, data) { //上传图片
				var instance = axios.create({
					headers: {
						'Content-Type': 'application/json'
					},
					timeout: 5000,
					baseURL: 'http://47.115.152.5:8080/',
					withCredentials: true,
				});
				return new Promise((resolve, reject) => {
					instance({
							method: methed,
							url: url,
							data: methed === 'get' ? {
								params: data
							} : data,
						})
						.then(response => {
							// 对接口错误码做处理
							resolve(response.data)
						})
						.catch(err => {
							reject(err)
						})
				})
			},
			upload(event,key) { //上传图片
				let files = event.target.files;
				// console.log(key);//获取改行的序号key
				if (!files.length) alert("没照片");
				this.imgformdata = new FormData();
				this.imgformdata.append('upload_file', files[0], files[0].name);
				var that = this;
				this.request('POST', 'http://47.115.152.5:8080/manage/product/upload.do', that.imgformdata)
					.then(response => {
						
						that.mainimage=response.data.uri;//图片名称，要拼接到主机url
						// console.log(that.mainimage);
						that.updateGood(true,key,that.mainimage);//更新图片名称的函数
						//,key,that.mainimage
					})
			},
			dialogClose(typename) {
				this.$refs[typename].resetFields(); // 这里就是重置表单了~
				this.updateVisible = false;
				this.insertGoodsVisible = false;
			},
			Picture(keyPath,flag) {
				// console.log(key,keyPath);
				// console.log(keyPath.mainImage);
				// var base = keyPath.imageHost;
				if(flag){
				this.imageurl=keyPath.imageHost+keyPath.mainImage;
				this.imgVisible=true;
				}
				else{
					this.imgVisible=false;
				}
			}

		}

	}
</script>

<style>
	.el-dialog__title {
		float: left;
	}

	/* 修复更新的弹出栏的标题居左的bug */
</style>
